<template>
    <div class="com-container">
        <!-- 同时绘制多个饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'PiesChart',
})
// 饼图
export default class PiesChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            tooltip: {
                trigger: 'item',
                position: 'inside',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                formatter: function(param) {
                    return (
                        param.marker +
                        '&nbsp' +
                        param.name +
                        '&nbsp&nbsp' +
                        (param.data?.proportion || '0') +
                        '%' +
                        '&nbsp&nbsp' +
                        (param.data?.value || '0') +
                        '条'
                    );
                },
                confine: true,
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },

            legend: {
                orient: 'horizontal',
                icon: 'circle',
                left: 'left',
                top: 0,
                itemHeight: 10, // 修改icon图形大小
                itemWidth: 8,
                itemGap: 10,
                padding: [5, 15],
                data: ['法律法规', '公司规定', '契约规定', '其他规定'],
                selectedMode: false,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'rgba(0,0,0,.65)',
                },
            },
            color: ['#5FB2FF', '#73E0FF', '#96A0FF', '#F47B8F', '#69FFED'],
            series: [
                {
                    // name: 'Access From',
                    // roseType: 'radius',
                    type: 'pie',
                    radius: '56%',
                    center: ['13%', '55%'],
                    data: [],
                    label: {
                        show: false,
                        color: 'black',
                        normal: {
                            show: false,
                            formatter: '{d}%',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(0,0,0,.45)',
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        smooth: 0.2,
                        length: 3,
                        length2: 6,
                    },
                    top: '-10%',
                    title: {
                        show: true,
                        x: 'center',
                        y: '70%',
                        text: '送审',
                        textStyle: {
                            fontSize: 13,
                            fontWeight: '700',
                            fontStyle: 'normal',
                            color: 'rgba(0,0,0,0.65)',
                        },
                    },
                },
                {
                    // roseType: 'radius',
                    type: 'pie',
                    radius: '56%',
                    center: ['38%', '55%'],
                    data: [
                        // { value: 80, name: '法律法规' },
                        // { value: 60, name: '公司规定' },
                        // { value: 56, name: '契约规定' },
                        // { value: 50, name: '其他规定' },
                    ],

                    label: {
                        show: false,
                        normal: {
                            show: false,
                            formatter: '{d}%',
                            textStyle: {
                                color: 'rgba(0,0,0,.45)',
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        smooth: 0.2,
                        length: 3,
                        length2: 6,
                    },
                    top: '-10%',
                },
                {
                    // roseType: 'radius',
                    type: 'pie',
                    radius: '56%',
                    center: ['63%', '55%'],
                    data: [
                        // { value: 80, name: '法律法规' },
                        // { value: 60, name: '公司规定' },
                        // { value: 56, name: '契约规定' },
                        // { value: 50, name: '其他规定' },
                    ],

                    label: {
                        show: false,
                        color: 'black',
                        normal: {
                            show: false,
                            formatter: '{d}%',
                            textStyle: {
                                color: 'rgba(0,0,0,.45)',
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        smooth: 0.2,
                        length: 3,
                        length2: 6,
                    },
                    top: '-10%',
                },
                {
                    // roseType: 'radius',
                    type: 'pie',
                    radius: '56%',
                    center: ['88%', '55%'],
                    data: [],
                    label: {
                        show: false,
                        color: 'black',
                        normal: {
                            show: false,
                            formatter: '{d}%',
                            textStyle: {
                                color: 'rgba(0,0,0,.45)',
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        smooth: 0.2,
                        length: 3,
                        length2: 6,
                    },
                    top: '-10%',
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            // series: this.handleShow(e.data),
            series: e.data,
            legend: { orient: e.legendDirection, ...e.legendLocation },
        };
        this.chartInstance.setOption(dataOption);
    }

    // 根据数据动态显示label和labelLine
    handleShow(arr) {
        arr.forEach(item => {
            item.data.forEach(ele => {
                ele.label = {
                    show: (function() {
                        if (ele.value == 0) {
                            return false;
                        } else {
                            return true;
                        }
                    })(),
                };
                ele.labelLine = {
                    show: (function() {
                        if (ele.value == 0) {
                            return false;
                        } else {
                            return true;
                        }
                    })(),
                };
            });
        });

        return arr;
    }

    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
